<template>
  <div id="charges">
    <div class="price-card" v-for="(item, key) in newAllData" :key="key">
      <div class="price-card-header">
        <div class="title">{{platformTitle[key]}}</div>
        <div class="tips">实际扣费以财务流水为准，有疑问联系平台客服。</div>
      </div>
      <div class="price-card-content">
        <div class="card-box" v-for="(cell, cellIndex) in item" :key="cellIndex">
          <div class="card-box-header">
            {{payType[cellIndex]}}
          </div>
          <div class="create-table">
            <div class="creat-table-th">
              <div class="creat-table-td">价格区间</div>
              <div class="creat-table-td color-red" v-if="cellIndex =='salesArr'">您的佣金({{merchantMoneyText}})</div>
              <div class="creat-table-td" v-else>默认佣金({{merchantMoneyText}})</div>
            </div>
            <div class="creat-table-tr" v-for="(value, index) in cell" :key="index">
              <div class="creat-table-td" v-if="cellIndex == 'flowArr'">{{flowType[value.title]}}</div>
              <div class="creat-table-td" v-else>{{value.title}}</div>
              <div class="creat-table-td color-red" v-if="value.pay_type == 1">{{getYourPrice(value.default_price)}}</div>
              <div class="creat-table-td" v-else>{{value.default_price}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    apiGetServiceFeeList,
    apiIsBindShop
  } from '../../request/api.js'
  export default{
    data(){
      return{
        discount: 0,
        allData: {
          service_fee_tb: {
            salesArr: [],
            flowArr: [],
            appreciationArr: [],
            evaluateArr: []
          },
          service_fee_tm: {
            salesArr: [],
            flowArr: [],
            appreciationArr: [],
            evaluateArr: []
          },
          service_fee_jd: {
            salesArr: [],
            flowArr: [],
            appreciationArr: [],
            evaluateArr: []
          },
          service_fee_albb: {
            salesArr: [],
            flowArr: [],
            appreciationArr: [],
            evaluateArr: []
          },
          service_fee_wph: {
            salesArr: [],
            flowArr: [],
            appreciationArr: [],
            evaluateArr: []
          },
          service_fee_pdd: {
            salesArr: [],
            flowArr: [],
            appreciationArr: [],
            evaluateArr: []
          }
        },
        platformTitle: {
          service_fee_tb: '淘宝标准',
          service_fee_tm: '天猫标准',
          service_fee_jd: '京东标准',
          service_fee_albb: '1688标准',
          service_fee_wph: '唯品会标准',
          service_fee_pdd: '拼多多标准'
        },
        platformTypeData: {
          service_fee_tb: '1',
          service_fee_tm: '2',
          service_fee_jd: '3',
          service_fee_albb: '4',
          service_fee_wph: '13',
          service_fee_pdd: '15'
        },
        payType: {
          salesArr: '销量价格',
          flowArr: '流量价格',
          appreciationArr: '增值价格',
          evaluateArr: '评论价格'
        },
        flowType: {
          1: '浏览',
          2: '浏览+关注',
          3: '浏览+加购',
          4: '浏览+收藏',
          5: '浏览+加购+关注',
          6: '浏览+关注+收藏',
          7: '浏览+加购+收藏',
          8: '浏览+加购+关注+收藏'
        },
        titleArr: ['浏览评价截图','假聊截图','货比三家截图'],
        shopShowType: window.localStorage.getItem('shopShowType'),
        newAllData: {},
        merchantMoneyText:  window.localStorage.getItem("merchantMoneyText"),
        userToken: window.localStorage.getItem('token'),
        merchantData: JSON.parse(window.localStorage.getItem('merchantConfig')),
      }
    },
    created() {
      this.getTableData()
      this.bindShop()
    },
    methods:{
      getTableData(){
        var stringArr = ['service_fee_tb', 'service_fee_tm', 'service_fee_jd','service_fee_albb', 'service_fee_wph', 'service_fee_pdd']
        this.$isClick(true);
         apiGetServiceFeeList({
            token: this.userToken
         }).then(res =>{
           this.$isClick(false);
            if (res.code == 1){
             this.discount = res.msg.discount
             var newres = res.msg
             for (var i in stringArr) {
                 var smallArr = newres[stringArr[i]]
                 for (var j in smallArr) {
                   if (smallArr[j]['pay_type'] == 1) {
                     this.allData[stringArr[i]]['salesArr'].push(smallArr[j])
                   }
                   if (smallArr[j]['pay_type'] == 2) {
                     this.allData[stringArr[i]]['appreciationArr'].push(smallArr[j])
                   }
                   if (smallArr[j]['pay_type'] == 3) {

                     this.allData[stringArr[i]]['flowArr'].push(smallArr[j])
                   }

                   if (smallArr[j]['pay_type'] == 4) {
                     if(this.titleArr.indexOf(smallArr[j]['title']) <0){
                       this.allData[stringArr[i]]['evaluateArr'].push(smallArr[j])
                     }

                   }
                 }

             }
             if(this.merchantData.shop_show_type){
               let shopShowTypeArr = this.merchantData.shop_show_type.split(',')
               for(var i in this.allData){
                 if(shopShowTypeArr.indexOf(this.platformTypeData[i]) >=0) {
                   this.$set(this.newAllData,i,this.allData[i])
                 }
               }
             } else {
               this.newAllData = this.allData
             }
            } else {
              this.$message.error(res.msg);
            }
         }).catch(res => {
             this.$message.error(res.msg)
         })
      },
      bindShop(){
        this.$isClick(true);
         apiIsBindShop({
           token: this.userToken
         }).then(res =>{
           this.$isClick(false);
            if (res.code == -1){
             this.$message.error('你尚未绑定店铺，请先前往绑定');
             setTimeout(()=>{
              this.$router.push('/shopManage/shopManage')
             },1000)
            }
         }).catch(res => {
           this.$isClick(false);
             this.$message.error(res.msg)
         })
      },
      getYourPrice(price) {
        return (parseFloat(price) * this.discount / 10).toFixed(2)
      },
    }
  }
</script>

<style lang="less">
  #charges {
    .price-card {
      background: #FFFFFF;
      margin-bottom: 16px;
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
      padding-bottom: 16px;
      border-radius: 5px;
      .price-card-header {
        background: #ecf5ff;
        padding: 10px;
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        .title {
          line-height: 20px;
          border-left: 3px solid #666666;
          padding-left: 10px;
          font-size: 16px;
          font-weight: 700;
          color: #333333;
          width: 150px;
        }
        .tips {
          font-size: 14px;
          color: red;
        }
      }
      .price-card-content {
         padding: 10px 20px;
         .card-box-header {
           .card-header-title {
             color: red;
           }
         }

         .card-box {
           .card-box-header {
             box-shadow: 0 0 6px rgba(0, 0, 0, .1);
             font-size: 15px;
             color: #333;
             background: #f5f5f5;
             height: 40px;
             line-height: 40px;
             border-bottom: 1px solid #ebeef5;
             padding-left: 20px;
             font-weight: 700;
             margin: 20px 0;
           }
           .create-table {
             width: 100%;
             display: flex;
             display: -webkit-flex;
             flex-wrap: wrap;
             flex-direction: row;
             text-align: center;
             font-size: 14px;
             .color-red {
               color: red;
             }
             .creat-table-th {
               background: #f5f5f5;
             }
             .creat-table-td {
               flex-basis: 100px;
               -webkit-flex-basis: 100px;
               height: 40px;
               line-height: 40px;
               border:1px solid #ebeef5;
             }
             .creat-table-th .creat-table-td {
               padding: 0px 10px;
             }
             .creat-table-tr .creat-table-td {
               padding: 0px 20px;
             }
           }
         }
      }
    }
  }
</style>
